<template>
  <div class="all">
    <div class="a-nav">
      <el-button type="primary" v-if="!Cshow" @click="show()">添加类别</el-button>
      <el-button type="primary" v-else @click="cancel()">管理类别</el-button>
      <div class="a-body">
        <table width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>ID</th>
              <th>类别名称</th>
              <th>上级类别</th>
              <th>添加时间</th>
              <th>管理操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(val,index) in category">
              <td>{{val.id}}</td>
              <td>{{val.type}}</td>
              <td>{{val.superior}}</td>
              <td>{{val.addTime}}</td>
              <td><i v-if="val.level==1" @click="addreveal(val)">添加子类别&nbsp;&nbsp;|&nbsp;&nbsp;</i><i @click="reveal(val)">修改</i>&nbsp;&nbsp;|&nbsp;&nbsp;<i @click="del(val)">删除</i></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="a-add" v-show="Cshow">
      <table width="100%" cellspacing="0">
        <thead>
          <tr>
            <th colspan="2">基本选项</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>上级类别:</th>
            <td>
              <select v-model="Cdate.level" :disabled="Cdate.condition!=2">
                <option value="1">≡ 作为一级类别 ≡</option>
                <option v-for="(val,index) in category" v-if="val.level==1" :value="val.type">{{val.type}}</option>
              </select>
            </td>
          </tr>
          <tr>
            <th>类别名称：</th>
            <td><input type="text" v-model="Cdate.type"></td>
          </tr>
        </tbody>
      </table>
       <button @click="cancel()">取消</button>
      <button @click="submit()">提交</button>

    </div>
  </div>
</template>

<script>
  export default{
    inject:["reload"],
    data(){
      return{
        select:'list',
        Cshow:false,
        Cdate:{
          condition:2,
          level:1
        },
        category:[],
      }
    },
    methods:{
      //删除
      del(e){
        var _this=this
           this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           _this.Postdata('admin/liveType/delete',e)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //提交
      submit(){
        var superior=this.Cdate.level
        if(superior==1){
          if(this.Cdate.id){
            this.Postdata('admin/liveType/mod',this.Cdate)
          }else{
             this.Postdata('admin/liveType/add',this.Cdate)
          }
          
          console.log(this.Cdate)
        }else{
          this.Cdate.level=2
          this.Cdate.superior=superior
         this.Postdata('admin/liveType/add',this.Cdate)
        console.log(this.Cdate)
        }

      },
      reveal(e){
        this.Cshow=true
        this.Cdate=JSON.parse(JSON.stringify(e))
      },
      addreveal(e){
        this.Cshow=true
        this.Cdate.level=e.type
        this.Cdate.condition=1
        console.log(this.Cdate)
      },
      show(){
        this.Cshow=true
      },
      cancel(){
        this.reload()
        // this.Cshow=false
        // _this.reload()
        // Object.assign(this.$data.Cdate,this.$options.data().Cdate)
        //  console.log(this.Cdate)
      },
      Postdata(url,e){
        var _this=this
        this.$axios({
                method: "POST",
                url: '/api/'+url,
                headers: {'Content-Type': 'application/json'},
                data: {
                          adminName:_this.$cookies.get('adminName'),
                          token:_this.$cookies.get('token'),
                          type:e.type,
                          level:e.level,
                          superior:e.superior,
                          id:e.id
                      },
               }).then(function(res){
                 console.log(res)
                 if(res.data.code==0){
                   if(res.data.data!=null){
                     _this.category=res.data.data.liveTypes
                   }else{
                     _this.$alert('操作成功', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                          _this.reload()
                        }
                      });
                   }
                 }else{
                   _this.$alert('操作失败,请重试', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        //_this.reload()
                      }
                    });
                 }
               })
      }
    },
    mounted(){
    this.Postdata('admin/liveType/getAll',this.Cdate)

    }
  }
</script>

<style scoped>

  .a-body{
    margin-top: 10px;
    padding-bottom: 20px;
  }
  .a-body thead th{
    height: 30px;
        background: #eef3f7;
        border-bottom: 1px solid #d5dfe8;
        font-weight: normal;
        border-spacing:0;
  }
  .a-body td{
    text-align: center;
    border-bottom: 1px solid #eee;
    height: 35px;
  }
  .a-add{
        width: 500px;
        border: 1px solid #999;
        position: fixed;
        top: 37%;
        left: 41%;
        height: 200px;
        z-index: 12;
        background-color: #fff;
  }

  .a-add thead th{
    height: 30px;
    background: #eef3f7;
    border-bottom: 1px solid #d5dfe8;
    border-spacing: 0;
    text-align: center;
  }
  .a-add td,.a-add tbody th{
 border-bottom: 1px solid #eee;
  font-weight: normal;
  height: 50px;
  }
.a-add button{
  float: right;
    margin: 22px 6px 0 3px;

}
</style>
